<template>
	<view class="item">
		<view class="item__title">
			<rich-text :nodes="title"></rich-text>
		</view>
		<view>
			<radio-group @change="handleChange">
				<view v-for="item in itemData.option" :key="item.uuid" class="item__option">
					<label>
						<radio :value="item.label">{{ item.label }}.&thinsp;</radio>
					</label>
					<rich-text :nodes="item.content" class="item__option__content"></rich-text>
				</view>
			</radio-group>
		</view>
		<view class="item__analysis" v-if="dShowParse">
			<text>[答案]&thinsp;{{ itemData.content.answer }}</text>
			<text v-if="itemData.user_answer" class="item__answer_my">[我的答案]&thinsp;{{ itemData.user_answer }}</text>
			<rich-text :nodes="textAnalysis"></rich-text>
		</view>
		<view class="item__toolbar">
			<button @click="handleAnswerClick" size="mini">{{dShowParse ? '隐藏' : '显示'}}答案解析</button>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		itemData: {
			type: Object,
			default: () => ({}),
		},
		showAnalysis: {
			type: Boolean,
			default: false,
		},
		showAnswer: {
			type: Boolean,
			default: false,
		},
	},
	computed: {
		title() {
			return this.itemData.content.content.replace(/<p([^>]*)>/i, (p0) => {
				return `${p0}${this.itemData.basic.pno ? this.itemData.basic.pno + '.' : ''}${this.itemData.basic.no}.&thinsp;[${this.itemData.basic.type_alias}]&thinsp;`;
			});
		},
		textAnalysis() {
			return this.itemData.content.text_analysis.replace(/<p([^>]*)>/i, (p0) => {
				return `${p0}[解析]&thinsp;`;
			});
		},
	},
	watch: {
		showAnalysis: {
			immediate: true,
			handler(val) {
				this.dShowParse = val;
			},
		},
		showAnswer: {
			immediate: true,
			handler(val) {
				this.dShowAnswer = val;
			},
		}
	},
	data() {
		return {
			isExpand: false,
			dShowAnswer: false,
			dShowParse: false,
		};
	},
	methods: {
		handleClick() {
			this.isExpand = !this.isExpand;
		},
		handleAnswerClick() {
			this.dShowParse = !this.dShowParse;
			this.dShowAnswer = !this.dShowAnswer;
		},
		handleChange({ detail: { value } }) {
			console.warn('handleChange', value);
			this.$emit('change', value);
		}
	},
	created() {
		console.warn('single-created');
	},
	mounted() {
		console.warn('single-mounted');
	},
}
</script>

<style lang="scss" scoped>
.item {
	padding-top: 10rpx;
	padding-bottom: 10rpx;
	&__option {
		display: flex;
		&__content {
			flex: 1;
			margin-left: 6rpx;
		}
	}
	&__option:nth-child(n+1) {
		margin-top: 10rpx;
	}
	&__analysis {
		margin-top: 10rpx;
	}
	&__toolbar {
		margin-top: 10rpx;
	}
	&__answer_my {
		margin-left: 40rpx;
	}
}
</style>